<template>
  <div id="container" class="container" @scroll="onScroll($event)">
    <ul class="box" :style="{height: list*40 + 'px'}">
      <template  v-for="(item,index) in list">
        <li class="item" 
        v-if="40*index - scrollTop >= -40*10 && 40*index - 800 - scrollTop < 0"
         :key="index" :style="{top: 40*index + 'px'}"
        >
          {{index + 1}}
        </li>
      </template>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: 10000,
      scrollTop: 0
    }
  },
  methods: {
    onScroll (e) {
      this.scrollTop = e.target.scrollTop
    }
  }
}
</script>
<style>
.container {
  margin: 100px;
  height: 400px;
  width: 300px;
  border: 1px solid #ddd;
  overflow: auto;
}
.box {
  position: relative;
}
.item {
  position: absolute;
  left: 0;
  width: 100%;
  border: 1px solid #ddd;
  height: 40px;
  line-height: 38px;
  text-align: center;
}
</style>